<template>
  <div class="item">
    <i>
      <input type="checkbox" :checked="todo.completed" @change="changestatus(todo)">
    </i>
    <div class="details">
      <slot></slot>
    </div>
    <span class="delete" @click="deletetodo(todo)">删除</span>
  </div>
</template>
<script setup>
import {defineProps} from 'vue'
import { storeToRefs } from 'pinia'
import { useTodoStore } from '@/stores/counter'

const props = defineProps({
  todo: {
    type: Object,
    required: true
  }
})
const store = useTodoStore()

const {changestatus, deletetodo} = store


</script>
<style scoped>
.item {
  /* margin-top: 1rem; */
  display: flex;
  position: relative;
}

.details {
  flex: 1;
  /* margin-left: 1rem; */
}

i {
  display: flex;
  place-items: center;
  place-content: center;
  width: 32px;
  /* height: 32px; */

  color: var(--color-text);
}

h3 {
  font-size: 1.2rem;
  font-weight: 500;
  /* margin-bottom: 0.4rem; */
  color: var(--color-heading);
}

@media (min-width: 1024px) {
  .item {
    margin-top: 10px;
    /* padding: 0.4rem 0 1rem calc(var(--section-gap) / 2); */
  }

}
.delete {
  cursor: pointer;
}
</style>
